<template>
    <div class="vm-nav-item-container">
        <div class="lm-left-container">
            <div class="lm-header-warp">
                <span>信采通</span>
            </div>
            <div class="lm-body-warp">
                <router-link :to="list.router" class="menu-item"  v-for="(list, key) in vmMenuItemData.lm" :key="key">
                    <i :class="['vm-icon',list.iconClass]"></i>
                    <p>{{ list.title }}</p>
                </router-link>
            </div>
        </div>
        <div class="bl-right-container">
            <div class="bl-header-warp">
                <span>营采通</span>
            </div>
            <div class="bl-body-warp">
                <router-link tag="div" :to="list.router" class="menu-item" v-for="(list, key) in vmMenuItemData.bl" :key="key">
                    <i :class="['vm-icon',list.iconClass]"></i>
                    <p>{{ list.title }}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            vmMenuItemData:{
                lm: [
                    { title: '审批中心', iconClass: 'examine-center', router: '/examine' },
                    { title: '需求信息', iconClass: 'require-info', router: '/require'},
                    { title: '工作台', iconClass: 'desk', router: '/work_bench' },
                    { title: '分类供应商', iconClass: 'category-supplier', router: '/category_supplier/supplier_list' },
                    { title: '匹配采购', iconClass: 'match-purchase', router: '/matching_purchase' },
                    { title: '统计分析', iconClass: 'statist-analysis', router: '/statistics_analysis' },
                ],
                bl: [
                    { title: '业务交易中心', iconClass: 'business-transaction-center',router: '/business_transction' },
                    { title: '公司信息', iconClass: 'company-info', router: '/company' },
                    { title: '电子商务', iconClass: 'electronic-commerce', router: '/'  },
                    { title: '服务申请', iconClass: 'service-application', router: '/'  },
                ]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.vm-nav-item-container {
    background: #fff;
    width: 100%;
    height: 390px;
    display: flex;
    .lm-left-container {
        border-right: 1px solid #eeeeee;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .lm-header-warp {
            height: 72px;
            padding-left: 35px;
            padding-top: 15px;
            display: flex;
            justify-content: flex-start;
            span {
                font-size: 26px;
                color: #666;
            }
        }
        .lm-body-warp {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            .menu-item {
                justify-content: center;
                width: 33.333%;
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                    color: #333333;
                    font-size: 22px;
                    margin-top: 15px;
                }
                i.vm-icon {
                    width: 90px;
                    height: 90px;
                }
                i.vm-icon.examine-center {
                    background-position: -496px -95px;
                }
                i.vm-icon.require-info {
                    background-position: -496px -3px;
                }
                i.vm-icon.desk {
                    background-position: -404px -95px;
                }
                i.vm-icon.category-supplier {
                    background-position: -496px -463px;
                }
                i.vm-icon.match-purchase {
                    background-position: -404px -279px;
                }
                i.vm-icon.statist-analysis {
                    background-position: -404px -187px;
                }
            }
        }
    }
    .bl-right-container {
        height: 100%;
        width: 312px;
        display: flex;
        flex-direction: column;
        .bl-header-warp {
            height: 72px;
            padding-left: 30px;
            padding-top: 15px;
            display: flex;
            justify-content: flex-start;
            span {
                font-size: 26px;
                color: #666;
            }
        }
        .bl-body-warp {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            .menu-item {
                justify-content: center;
                width: 50%;
                align-items: center;
                display: flex;
                flex-direction: column;
                p {
                    color: #333333;
                    font-size: 22px;
                    margin-top: 15px;
                }
                i.vm-icon {
                  width: 90px;
                  height: 90px;
                }
                i.vm-icon.business-transaction-center {
                    background-position: -496px -371px;
                }
                i.vm-icon.company-info {
                    background-position: -404px -3px;
                }
                i.vm-icon.electronic-commerce {
                    background-position: -496px -279px;
                }
                i.vm-icon.service-application {
                    background-position: -496px -187px;
                }
            }
        }
    }
}
</style>


